<template>
	<view class="page">
		<view class="topTips"  @click="handleGongzonghao">
			{{language.phonePackage.tip1}}
		</view>
		<view class="container" style="padding-bottom: 50rpx;padding-top: 50rpx;">
			<view class="topBox">
				<view class="topcontent">
				  <view class="title_content">
				    <!-- <view class="v_content">{{language.phonePackage.label2}}：</view> <view class="v_content">{{chargingDuration ? chargingDuration : 0 }}</view> -->
				    <view class="v_content label">{{language.phonePackage.label9}}</view> <view class="v_content">{{detail.baseName ? detail.baseName : 0 }}</view>
				  </view>
				  <view class="title_content">
				    <view class="v_content label">{{language.phonePackage.label3}}</view> <view class="v_content">{{detail.ruleValidDate ? detail.ruleValidDate : 0}}</view>
				  </view>
				  <view class="title_content">
					  <view class="v_content label">{{language.phonePackage.label10}}</view> <view class="v_content">{{detail.monthDuration ? detail.monthDuration : 0}}</view>
				  </view>
				  <view class="title_content">
					  <view class="v_content label">{{language.phonePackage.label11}}</view> <view class="v_content">{{detail.useMinute ? detail.useMinute : 0}}</view>
				  </view>
				</view>
				<view class="topcontent">
				  <view class="title_content">
				    <view class="v_content label">{{language.phonePackage.label12}}</view> <view class="v_content">{{detail.callDurationSum ? detail.callDurationSum : 0 }}</view>
				  </view>
				  <view class="title_content">
				    <view class="v_content label">{{language.phonePackage.label13}}</view> <view class="v_content">{{detail.ruleValidDate ? detail.ruleValidDate : 0}}</view>
				  </view>
				  <view class="title_content">
					  <view class="v_content label">{{language.phonePackage.label14}}</view> <view class="v_content">{{detail.chargingDuration ? detail.chargingDuration : 0}}</view>
				  </view>
				  <view class="title_content">
					  <view class="v_content label">{{language.phonePackage.label15}}</view> <view class="v_content">{{detail.useCallMinute  ? detail.useCallMinute  : 0}}</view>
				  </view>
				</view>
			</view>
		 
		  <view class='bottomcontent'>
		    <view class="menuBox">
		      <view class="item" @click='faceCollect'>
		        <image :src="imgBaseUrl+'/images/phone/item3.png'" mode="widthFix"/>
		        <view style="color: #00a2e8;">{{language.phonePackage.label4}}</view>
		      </view>
		      <view class="item" @click='familyMan'>
		        <image :src="imgBaseUrl+'/images/phone/item4.png'" mode="widthFix"/>
		        <view style="color: #5ccbba;">{{language.phonePackage.label5}}</view>
		      </view>
		     <view class="item" @click='bugPackage'>
		        <image :src="imgBaseUrl+'/images/phone/item5.png'" mode="widthFix"/>
		        <view style="color:#f26665;">{{language.phonePackage.label6}}</view>
		      </view>
		      <view class="item" @click='GoToMini'>
		        <image :src="imgBaseUrl+'/images/phone/item6.png'" mode="widthFix"/>
		        <view style="color: #9c61fb;">{{language.phonePackage.label7}}</view>
		      </view>
		    </view>
		  </view>
		  <view class="tips" >
		    <view class="text">{{language.phonePackage.label8}}：</view>
		    <view class="text" style="text-indent: 2em">{{language.phonePackage.tip2}}</view>
		    <view class="text" style="text-indent: 2em">{{language.phonePackage.tip3}}</view>
		    <view class="text" style="text-indent: 2em">{{language.phonePackage.tip4}}<text @click="handleGongzonghao">{{language.phonePackage.tip5}}</text></view>
		    <view class="text" style="text-indent: 2em">{{language.phonePackage.tip6}}</view>
		  </view>
		  <!-- <contactBtn></contactBtn> -->
		
		  <view  class="questionBg"  v-if="questionShow">
		    <view class="question" v-if="questionShow" >
		      <view class="title" >
		      {{language.phonePackage.tip5}}
		      </view>
		      <view class="contentBox">
		        <image src="../../../static/images/gongzonghao.jpg" mode="widthFix" :show-menu-by-longpress="true" style="width: 350rpx;"/>
		      </view>
		      <view class="contentBox" style="padding-bottom:30rpx;">{{language.phonePackage.tip7}}</view>
		      <view class="questionBtn">
		        <view class="cancel btn" @click="handleGongzonghao">
		        {{language.phonePackage.cancel}}
		        </view>
		        <view class="confirmBtn btn" @click="handleGongzonghao">
		        {{language.phonePackage.confirm}}
		        </view>
		      </view>
		    </view>  
		  </view>
		</view>
	</view>
</template>

<script>
	import {getStudentCallDurationApi,getParentApi} from '@/common/api/commonApi/phoneApi.js'
	export default {
		data() {
			return {
				detail:{},
				monthDuration:'',
				ruleValidDate:'',
				chargingDuration:'',
				chargingValidDate:'',
				mobile:'',
				questionShow: false,
				selectInfoAccount: uni.getStorageSync('selectInfoAccount'),
			}
		},
		components:{
		},
		methods: {
			getPackageInfo() {
				 let data = {
					 usid: this.selectInfoAccount.id,
					 // xxbm: this.selectInfoAccount.departmentId,
					 xxbm: this.xxbm,
				 }
				 getStudentCallDurationApi(data).then(res=>{
					 this.detail = res.model
					 // this.monthDuration = res.model.monthDuration
					 // this.chargingDuration = res.model.chargingDuration
					 // this.chargingValidDate = res.model.chargingValidDate
				 })
			},
			faceCollect (){
				this.goPage('/pages/componentsC/phone/phoneface')
			},
			familyMan: function () {
				this.goPage('/pages/componentsC/phone/familyManDetail')
			},
			bugPackage: function() {
				this.goPage('/pages/componentsC/phone/bugPackage')
			},
			GoToMini:function() {
				wx.navigateToMiniProgram({
					appId: 'wx2cfb61ccc8e0eb31',
					path:'/pages/login/login',
				　  envVersion: 'release',// 打开正式版
					extraData:{
					organization: '',
					mobile: this.mobile ? this.mobile : '',   // 登录号码
					jump2Type: 2,           // 1.学生列表 2.授权列表 3.留言列表
					},
					// envVersion:"trial"  // trial 体验版 正式版不需要加上
				})
			},
			handleGongzonghao() {
			      this.questionShow = !this.questionShow
			
			},
			getInfo: function () {
				let data = {
					usid: this.selectInfoAccount.id,
					// usid: '1771107644199706625',
					// xxbm: this.selectInfoAccount.departmentId,
					xxbm: this.xxbm,
				}
				getParentApi(data).then(res=>{
					this.mobile = res.model.mobile
				})
			  },
		},
		onLoad() {
			this.setPageTitle(this.language.phonePackage.title)
			let info = uni.getStorageSync('selectInfoAccount')
			// this.params.mainframeNo = info.mainframeNo
		},
		onShow() {
			this.getPackageInfo()
			this.getInfo()
		},
	}
</script>

<style>
	.page{
		background-image: url('https://ecard.dglemin.com.cn:55005/images/phone/bg.png');
		background-position: center center;
		background-repeat: no-repeat;
		width: 100%;
		min-height: 100vh;
	}
	
	.container {
	  /* background-color: #f1f1f1; */
	}
	.topBox{
		/* background: #fff; */
		margin: 40rpx 0 0rpx;
	}
	
	.topcontent {
	  width: 670rpx;
	  min-height: 250rpx;
	  /* height: fit-content; */
	  background-size: 100% 100%;
	  background-position: top center;
	  background-repeat: no-repeat;
	  background: #fff;
	  border-radius: 20rpx;
	  /* border: 2rpx solid #dcdcdc; */
	  margin: 10rpx auto 25rpx;
	  padding: 20rpx;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-evenly;
	}
	
	.topcontent>view {
	  flex-direction: row;
	  display: flex;
	  padding: 0px 20px;
	}
	
	.topcontent>view .view1 {
	  height: auto;
	  width: 80%;
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  flex-wrap: nowrap;
	  justify-content: flex-start;
	}
	
	.topcontent>view .view1 .text1 {
	  width: fit-content;
	  height: fit-content;
	  font-size: 18px;
	  text-align: center;
	}
	
	.topcontent>view .view1 .text2 {
	  width: fit-content;
	  height: 40rpx;
	  font-size: 16px;
	  color: white;
	  text-align: center;
	  display: block;
	  line-height: 40rpx;
	  overflow: hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	}
	
	.topcontent>view .view2 {
	  height: auto;
	  width: 20%;
	  display: flex;
	  align-items: center;
	  overflow: hidden;
	  justify-content: flex-end;
	}
	
	.topcontent>view .view2 .text {
	  width: fit-content;
	  height: fit-content;
	  font-size: 16px;
	  color: blue;
	  float: right;
	  padding: 6px;
	}
	
	.bottomcontent {
	  width: 100%;
	  width: 670rpx;
	  /* background-color: #fff; */
	  margin: 10rpx auto 20rpx;
	}
	.title_head{
	  margin: 20px 20px 10px 20px;
	  display: flex;
	  justify-content: space-between;
	}
	.title_content{
	    display: flex;
	    justify-content: space-between;
		padding-bottom: 8rpx !important;
		border-bottom: 2rpx solid #ededed;
	    font-size: 15px;
	    color:#5f4e48e6;
	}
	/*每行3宫格*/
	
	.menuBox {
	  flex-direction: row;
	  display: flex;
	  justify-content: space-between;
	  flex-wrap: wrap;
	}
	
	/*每个单元格*/
	
	.bottomcontent .item {
	  width: 320rpx;
	  text-align: center;
	  min-height: 200rpx;
	  padding-top: 35rpx;
	  box-sizing: border-box;
	  background-color: #fefefe;
	  border-radius: 20rpx;
	  margin-bottom: 20rpx;
	}
	
	.bottomcontent>view>view>view {
	  text-align: center;
	  font-size: 14px;
	  color: #343434;
	  margin-top: 10rpx;
	}
	
	.bottomcontent image{
	  width: 100rpx;
	  height: 100rpx;
	  border-radius: 50%;
	  margin: auto;
	}
	
	.tips {
	  margin: 50rpx auto 50rpx;
	  background: rgba(0, 0, 0, 0.1);
	  color: #fefefe;
	  width: 670rpx;
	  border-radius: 10rpx;
	  padding: 20rpx;
	  box-shadow: 0px 0px 20px 0px rgba(102, 102, 102, 0.05);
	}
	
	.text {
	  /* color: #333; */
	}
	
	.topTips {
	  position: fixed;
	  top: 0rpx;
	  left: 50rpx;
	  width: 670rpx;
	  height: 60rpx;
	  background-color: #fff;
	  color: #ff4242;
	  border-radius: 20rpx;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  z-index: 10;
	}
	
	.question {
	  position: fixed;
	  z-index: 1000;
	  top: 50%;
	  left: 50%;
	  width: 80%;
	  transform: translate(-50%, -50%);
	  border-radius: 20rpx;
	  background: #fff;
	  color: #222;
	  box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);
	  overflow: hidden;
	}
	
	.question .title {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  height: 70rpx;
	  font-weight: 600;
	  position: relative;
	  /* border-bottom: 1px solid #ececec; */
	}
	
	.question .contentBox {
	  padding: 0 15rpx;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  color: #7f7f7f;
	  font-weight: 600;
	  font-size: 34rpx;
	}
	
	.question .title .close {
	  position: absolute;
	  right: 5%;
	  width: 40rpx;
	  height: 40rpx;
	}
	
	.questionBtn {
	  display: flex;
	  height: 90rpx;
	  width: 100%;
	  border-top: 1px solid #ececec;
	}
	
	.questionBtn .btn {
	  flex: 1;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  color: #333;
	}
	
	.question .confirmBtn {
	  background-color: #4089f0;
	  color: #fff;
	}
	
	.questionBg {
	  position: fixed;
	  top: 0;
	  left: 0;
	  background: rgba(0, 0, 0, 0.25);
	  width: 100vw;
	  height: 100vh;
	  z-index: 1000;
	}
	.label{
		color: #595959;
		font-weight: 600;
	}
</style>